<template>
  <div class="home">
    <h1>角色列表</h1>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="c">
      <!-- 添加按钮 -->
      <div class="top">
        <el-button type="primary" @click="addroles">添加角色</el-button>
      </div>
      <div class="bottom">
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <p v-if="scope.row.children.length != 0">
              <span v-for="(item,i) in scope.row.children"  @click.stop='cuo(item.id,scope.row.id)' :key="i">
                <el-tag>{{item.authName}}<b>×</b></el-tag>
                <span v-for="(ele, index) in item.children" :key="index">
                    <el-tag>{{ele.authName}}<b @click.stop='cuo(ele.id,scope.row.id)'>×</b></el-tag>
                    <span v-for="(rowa, j) in ele.children" :key="j">
                        <el-tag type="success">{{rowa.authName}}<b @click.stop='cuo(rowa.id,scope.row.id)'>×</b></el-tag>
                    </span>
                </span>
              </span>
            </p>
            </template>
          </el-table-column>
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="roleName" label="角色名称"> </el-table-column>
          <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="editroles(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row.id)"
                >删除</el-button
              >
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-setting"
                @click="permissions(scope.row.id)"
                >分配权限</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 点击添加按钮出现弹框 -->
      <el-dialog title="添加角色" :visible.sync="dialogVisible" width="30%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm.roleDesc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确定</el-button
            >
            <el-button type="info" @click="resetForm('ruleForm')"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 点击编辑按钮出现弹框 -->
      <el-dialog title="编辑角色" :visible.sync="dialogVisible1" width="30%">
        <el-form
          :model="ruleForm1"
          :rules="rules1"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm1.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm1.roleDesc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm1('ruleForm')"
              >确定</el-button
            >
            <el-button type="info" @click="resetForm1('ruleForm')"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 点击分配权限出现弹框 -->
      <el-dialog title="分配权限" :visible.sync="dialogVisible2" width="30%">
        <!-- data要展示的数据 -->
        <!-- show-checkbox要展示的复选框 -->
        <!-- default-expand-all默认展开所有行 -->
        <!-- node-key相当于v-for :key唯一 加快渲染 -->
        <!-- highlight-current选中当前高亮 -->
        <!-- props配置选项 展示文字信息是lable 我们后台展示的文字信息是authName -->
        <el-tree
          :data="wys"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="treedtod"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button type="info" @click="dialogVisible2 = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="determine">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getroles,
  postroles,
  deleteroles,
  putroles,
  postend,
  getroleId,
  getrightsid,
} from "@/Api";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      ruleForm: {
        roleDesc: "",
        roleName: "",
      },
      defaultProps: {
        children: "children",
        label: "authName",
      },
      wys: [],
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
      ruleForm1: {
        roleDesc: "",
        roleName: "",
        id: "",
      },
      rules1: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
      roleId: "",
    };
  },
  mounted() {},
  methods: {
    cuo(rId ,id){
    //  console.log(id,'roleIdroleIdroleId');
    //    console.log(rightId,'rightIdrightIdrightId');
     let roleId=id
     let rightId=rId
     getrightsid(roleId,rightId).then(res=>{
       console.log(res);
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.dialogVisible2 = false;
          this.getrole();
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
     })
    },
    // 分配权限
    permissions(e) {
      this.roleId = e;
      this.dialogVisible2 = true;
    },
    // 点击角色编辑
    editroles(row) {
      this.dialogVisible1 = true;
      this.ruleForm1.roleName = row.roleName;
      this.ruleForm1.roleDesc = row.roleDesc;
      this.ruleForm1.id = row.id;
    },
    // 删除
    del(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteroles(id).then((res) => {
            console.log(res);
            if (res.meta.status === 200) {
              this.$message({
                message: res.meta.msg,
                type: "success",
              });
            } else {
              this.$message({
                message: res.meta.msg,
                type: "error",
              });
            }
            // 渲染
            this.getrole();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getrole() {
      getroles().then((res) => {
        // console.log(res);
        this.tableData = res.data;
        this.wys = res.data;
      });
    },
    addroles() {
      this.dialogVisible = true;
    },
    // 添加模态框
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //   alert("submit!");
          let data = {
            roleName: this.ruleForm.roleName,
            roleDesc: this.ruleForm.roleDesc,
          };
          postroles(data).then((res) => {
            console.log(res);
            if (res.meta.status === 201) {
              this.$message({
                message: res.meta.msg,
                type: "success",
              });
            }
            //   关闭模态框
            this.dialogVisible = false;
            // 渲染到页面
            this.getrole();
            // 清空
            this.ruleForm.roleName = "";
            this.ruleForm.roleDesc = "";
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    determine() {
      // this.$refs.treedtod
      let arr1 = this.$refs.treedtod.getHalfCheckedKeys();
      let arr2 = this.$refs.treedtod.getCheckedKeys();
      // console.log(a);
      let data = {};
      getroleId(
        { roleId: this.roleId },
        { rids: [...arr1, ...arr2].join(",") }
      ).then((res) => {
        console.log(res);
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.dialogVisible2 = false;
          this.getrole();
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
      });
    },

    // 编辑模态框
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            roleName: this.ruleForm1.roleName,
            roleDesc: this.ruleForm1.roleDesc,
            id: this.ruleForm1.id,
          };
          putroles(data).then((res) => {
            console.log(res);
            if (res.meta.status === 200) {
              this.$message({
                message: res.meta.msg,
                type: "success",
              });
            }
            this.dialogVisible1 = false;
            this.getrole();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  components: {},
  created() {
    this.getrole();
  },
};
</script>

<style lang='scss' scoped>
h1 {
  color: #fff;
}
.c {
  background-color: #34429a;
  margin-top: 10px;
}
.top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
</style>
